/* Design URL : Shantiniketan - 26 Oct 22 Design by : Cross Country Webservices Designer : Rajesh Kumar Kukreja Version : HTML 5 / CSS 3 / Bootstrap 4 */ /*font-family: 'Montserrat', sans-serif;*/ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap'); /*font-family: 'Merriweather', serif;*/ @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,300&display=swap'); @font-face{ font-family:'Glyphicons Halflings'; src:url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot"); src:url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff") format("woff"), url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular") format("svg") } html { scroll-behavior: smooth; } body{ font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:18px; line-height: 28px; color:#4d4d4d; overflow-x: hidden; margin-top:90px; } h1, h2, h3, h4, h5, h6{ font-weight: 400; color:#4d4d4d; font-family: 'Merriweather', serif;} p{ font-family: 'Montserrat', sans-serif; font-size: 16px; line-height:30px; color:#4d4d4d; font-weight: 400; text-decoration:none; margin:0px 0px 15px 0px; padding:0px;} p a, p a:active, p a:visited {color:#4d4d4d;} p a:hover{color:000; } p strong{ font-weight: bold; color: inherit; } em{ font-weight:normal;} a:hover, a:focus { outline: none; text-decoration: none;} *:focus, *:visited { outline: none; text-decoration: none; } button:focus { outline: 0px dotted; outline: 0px auto -webkit-focus-ring-color; } /*** issule resolved (carousel content blink) ***/ /*body{overflow-x: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); }*/ .clearfix { clear: both; position: relative; } /*backtotop*/ #myBtn { display: none; position: fixed; bottom: 5px; right: 5px; z-index: 99999; font-size: 13px; border: none; outline: none; background-color: #111; background: #e72324; /*opacity: 1;*/ color: white; font-weight: 300; cursor: pointer; padding: 10px 10px; border-radius: 50px; } #myBtn:hover { opacity: 0.8; } /* common btn class */ .btn { background-color: #4d4d4d; border: none; border-radius: 0rem; font-family: 'Montserrat', sans-serif; color:#fff; cursor: pointer; display: inline-block; position: relative; text-transform: uppercase; transition: background-color 0.2s, color 0.2s; white-space: nowrap; font-size: 15px; padding:15px 40px; margin-top: 20px; font-family: 700; } .btn:hover, .btn:focus { opacity: 0.9; outline: none; color: #fff;} /* Style the header */ .fix-nav { background: none; /*position: absolute;*/ position: fixed; top: 0px; width: 100%; z-index: 999999; } .content { padding: 16px; } /* Page content */ /* The sticky class is added to the header with JS when it reaches its scroll position */ .sticky { position: fixed; /*position: absolute;*/ top: 0; width: 100%; /*background:rgba(0, 0, 0, 0.8);*/ } /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */ .sticky + .content { padding-top: 0px; } /* Navbar */ .navbar { padding: .7rem 1.5rem; } nav.navbar.navbar-expand-xl.navbar-light { max-width: 1600px; margin: 0 auto; } nav .navbar-brand{ padding-top: .7125rem; padding-bottom: .6125rem; /*max-width: 285px;*/ /*opacity: 0.6;*/ } nav .navbar-brand:hover{ opacity: 0.9; } .navbar-expand-xl .navbar-nav .nav-link { padding: 0.1rem; padding-right: 2rem; padding-left: 2rem; max-width: 1300px; } .navbar-nav .nav-link { color: #333333; font-size: 16px; font-weight: 400; } /* font-size */ .navbar-light .navbar-nav .active>.nav-link{ color: #333333; } .navbar-light .navbar-nav .nav-link { color: #333333; text-transform: uppercase; } .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: #555; opacity: 0.7; /* color: rgba(0,0,0,.7);*/ } .nav-item.border-left{ border-left:1px solid #dc3545!important; background: url(../images/login.png) 22px 12px no-repeat; padding-left: 18px; padding-top: 5px; } .nav-item .nav-link.btn.donate-btn{ margin: 0px; padding: .3rem 1rem; background: #dc3545; color: #fff; font-size: 15px; } .nav-item .nav-link.btn.donate-btn:hover{ color: #fff; opacity: 0.8; } .nav-item.donate-btn a.nav-link{ margin: 0px; padding: .3rem 0.5rem; background: #dc3545; color: #fff; font-size: 15px; } .nav-item.donate-btn a.nav-link:hover{ color: #fff; opacity: 0.8; } /* 9 july 2025 */ .navbar-light .navbar-nav .donate-btn.active>.nav-link { color: #fff; } /*.navbar-expand-xl .navbar-nav .dropdown-menu { position: absolute; z-index: 999999; text-align: left; background:rgba(0, 0, 0, 0.7); } .dropdown-item { color: #bbb; font-size: 14px; text-transform: uppercase; z-index: 999999; padding: 0.25rem 1rem 0.25rem 1rem;} .dropdown-item:focus, .dropdown-item:hover { color: #fff; text-decoration: none; background: #111; } .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link { color: rgba(255,255,255,.9); } .dropdown:hover>.dropdown-menu { display: block; } */ /* Crousal Banner */ #carousel-main{ /*height:100vh; width:100%;*/ overflow: hidden; } .caption1{ position: relative; background: url(../images/banner1.jpg) 0 0 no-repeat; width: 100%; height: 89vh; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; } .caption2{ position: relative; background: url(../images/banner2.jpg) 0 0 no-repeat; width: 100%; height: 89vh; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; } .caption3{ position: relative; background: url(../images/banner3.jpg) 0 0 no-repeat; width: 100%; height: 89vh; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; } .carousel .carousel-caption { position: absolute; bottom: 24%; text-align: center; max-width: 700px; margin: 0 auto; background: #dc3545; background: rgba(220, 53, 69, 0.8); padding: 50px;} .carousel .carousel-caption h5{font-family: 'Montserrat', sans-serif; font-size: 50px; line-height: 60px; font-weight: 600; text-transform: uppercase; color: #fff; margin-bottom: 10px;} .carousel .carousel-caption p{font-family: 'Montserrat', sans-serif; font-size:18px; line-height: 28px; font-weight: 300; color: #fff; } .carousel .carousel-caption .btn.donate-btn{ margin: 0px; padding: .7rem 1.5rem; background: #fff; color: #dc3545; font-size: 15px; font-weight: 600; } .carousel .carousel-caption .btn.donate-btn:hover{ opacity: 0.8; } .carousel-indicators { position: absolute; right: 0; bottom: 90px; } /**/ /* S3 - how we work*/ .about-foundation{ padding: 7rem 5rem; text-align: center; } .about-foundation h2{ font-size: 52px; line-height: 62px; font-weight: 400; color: #3d3d3d; margin-bottom: 7px; } .about-foundation h2 span{ font-size: 18px; line-height: 26px; font-weight: 300; color: #3d3d3d; display: block; } .about-foundation p{ font-size: 18px; line-height: 29px; font-weight: 400; color: #3d3d3d; } /* S3 - how we work*/ .how-we-work{ padding: 0; text-align: center; background: #f8f8f8; } .how-we-work .container-fluid{ padding: 0px; } .how-we-work .container-fluid .col-md-6{ padding: 0px; } .how-we-work .content{ padding: 0px 35px; text-align: left; max-width: 690px; } .how-we-work h2{ font-size: 52px; line-height: 62px; font-weight: 400; color: #3d3d3d; margin-bottom: 7px; } .how-we-work h2 span{ font-size: 18px; line-height: 26px; font-weight: 300; color: #3d3d3d; display: block; } .how-we-work p{ font-size: 16px; line-height: 24px; font-weight: 400; color: #3d3d3d; } .how-we-work ul{ list-style-type: none; padding-inline-start:0px ; } .how-we-work li{ font-size: 16px; line-height: 24px; background: url(../images/bullet-tick.png) 0 9px no-repeat; margin-bottom: 10px; padding-left: 25px; } /* Helping Hnd */ .helping-hand{ padding: 6rem 0; background: url(../images/helping-hand.jpg) 0 0; width: 100%; /* min-height: 800px; */ background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important;} .helping-hand h2{ font-size: 52px; line-height: 62px; font-weight: 400; color: #fff; margin-bottom: 7px; text-align: center; } /*.helping-hand h2 span{ font-size: 18px; line-height: 26px; font-weight: 300; color: #fff; display: block; }*/ .helping-hand p{ font-size: 18px; line-height: 29px; font-weight: 400; color: #fff; text-align: center; } .flip-card { background-color: transparent; /*width: 300px; height: 300px;*/ perspective: 1000px; min-height: 300px; } .flip-card h3{ font-size: 22px; line-height: 32px; margin-top: 7px; color: #3d3d3d; padding: 14px; } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;} .flip-card-front { background-color: #fff; color: black; width: 100%; height: auto; padding: 50px 0 30px 0; min-height: 270px; } .flip-card-back { background-color: #ebd7d7; color: white; width: 100%; height: auto; padding: 80px 0 30px 0; min-height: 270px; transform: rotateY(180deg); } .flip-card-back h4{ font-size: 30px; line-height: 32px; font-weight: 300; } .flip-card-back .btn{font-size: 18px; font-weight: 600; text-transform: capitalize; background: #d53e52; padding: 7px 20px; } /* S3 - gallery */ .gallery-home{ padding: 5rem 5rem; text-align: center; background: #f8f8f8; } .gallery-home h2{ font-size: 50px; line-height: 62px; font-weight: 400; color: #3d3d3d; margin-bottom: 7px; } .gallery-home h2 span{ font-size: 18px; line-height: 26px; font-weight: 300; color: #3d3d3d; display: block; } .gallery-home p{ font-size: 18px; line-height: 29px; font-weight: 400; color: #3d3d3d; } .gallery-home.row { display: block; width: 100%; } .gallery-home.row .gallery.col { width: 100%; max-width: 100%; } .container.gallery-container { /* background-color: #fff; */ /*color: #35373a; min-height: 100vh; padding: 30px 50px;*/ } .tz-gallery { padding: 5px; } /* Override bootstrap column paddings */ .tz-gallery .row > div { padding: 0px; margin: 0px; } .tz-gallery .lightbox img { width: 100%; border-radius: 0; position: relative; } .tz-gallery .lightbox:before { position: absolute; top: 50%; left: 50%; margin-top: -13px; margin-left: -13px; opacity: 0; color: #fff; font-size: 26px; font-family: 'Glyphicons Halflings'; content: '\e003'; pointer-events: none; z-index: 9000; transition: 0.4s; } .tz-gallery .lightbox:after { position: absolute; top:0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: rgba(46, 132, 206, 0.7); content: ''; transition: 0.4s; } .tz-gallery .lightbox:hover:after, .tz-gallery .lightbox:hover:before { opacity: 1; } .baguetteBox-button { background-color: transparent !important; } /*#baguetteBox-overlay.visible { opacity: 1; max-height: 660px; overflow: hidden; }*/ /* Events */ .events{ padding: 5rem 0rem 8rem 0rem; text-align: center; } .events h2{ font-size: 44px; line-height: 62px; font-weight: 400; color: #3d3d3d; margin-bottom: 7px; } .events h2 span{ font-size: 18px; line-height: 26px; font-weight: 300; color: #3d3d3d; display: block; } .events p{ font-size: 18px; line-height: 29px; font-weight: 400; color: #3d3d3d; } .events .flickity-viewport { min-height: 321px; } .events .gallery-cell {width: 26%; /*max-height: 70px;*/ height: auto; margin-right: 1%; counter-increment: gallery-cell;} .flickity-page-dots .dot{ background: #dc3545; width: 10px; height: 10px; } .events-box { position:relative; overflow:hidden; margin-bottom: 24px; border:1px solid #dc3545; } .events-box .layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.0); background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(252,252,252,0) 1%, rgba(0,0,0,0.7) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(252,252,252,0) 1%,rgba(0,0,0,0.7) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(252,252,252,0) 1%,rgba(0,0,0,0.7) 100%);} .events-box .layer:hover{ background: rgba(0, 0, 0, 0.4); } .events-box .layer .blog-content{ position:absolute; bottom: 30px; padding: 0px 30px 0 30px ; color: #fff; width: 100%; text-align: left;} .events-box .layer .blog-content .date{ font-size: 14px; line-height: 24px; border-bottom:1px solid #dc3545; padding-bottom: 7px; margin-bottom: 7px; } .events-box .layer .blog-content h3{ font-size: 28px; line-height: 40px; color: #fff; margin: 0px; font-weight: 400; } /* Facitly */ .facility { padding: 4rem 0rem 5rem 0rem; } .facility h2{ font-size: 44px; line-height: 62px; font-weight: 400; color: #3d3d3d; margin-bottom: 15px; text-align:center; } .facility h2 span{ font-size: 18px; line-height: 26px; font-weight: 300; color: #3d3d3d; display: block; } .facility h4{ font-size: 34px; line-height: 44px; font-weight: 300; color: #3d3d3d; margin-bottom: 15px; } .facility p{ font-size: 16px; line-height: 26px; font-weight: 400; color: #3d3d3d; } /* FOOTER */ footer{ background: #000c20; padding: 1.5rem 0 1rem 0; } .footer{ max-width: 1240px; margin: 0 auto 10px auto; } .footer .f-content .f-logo{ padding-bottom: 20px; margin: 0 auto; max-width: 211px; margin-bottom: 25px; height: 50px; } .footer .f-content { padding: 0 15px; } .footer .f-content p, .footer .f-content p a{ color: #fff; font-size: 14px; line-height: 22px; text-align: left; max-width: 290px; } .f-content p a:hover{ color: #bccfd9; } .footer .f-content p.phone{ background: url(../images/phone.png) 0 0 no-repeat; padding-left: 30px; opacity: 0.9; color: #fff; } .footer .f-content p.email{ background: url(../images/email1.png) 0 4px no-repeat; padding-left: 30px; opacity: 0.8; color: #fff; } .footer .f-content h4{ font-size: 22px; line-height: 32px; color: #fff; margin-bottom: 5px; padding-top: 10px; } .footer .f-content ul{ list-style-type: none; color: #fff; padding-inline-start: 0px;} .footer .f-content li{ color: #bccfd9; font-size: 14px; line-height: 20px; margin-bottom: 15px; /* background: url(../images/bullet-tick.png) 0px 10px no-repeat; padding-left: 25px;*/ } .footer .f-content li strong{ color: #fff; font-weight: 400} .f3-copyright{ background: #27364f; color: #fff; padding: 10px 0; } .f3-copyright p{ font-size: 13px; text-align: center; color: #bccfd9; margin-bottom: 0px;} /**/ /* back to top */ #btn-back-to-top.btt{ border: 0px; background: transparent; padding: 0px; margin: 0px; border-radius: 80px;} #btn-back-to-top { position: fixed; bottom: 20px; right: 20px; z-index: 9999999; display: none;} #btn-back-to-top:hover { opacity: 0.7; } /* */ /* LISRING PAGE updated 20 jan 2023 */ .listing-header .carousel .carousel-caption { position: absolute; bottom: 24%; text-align: center; max-width: 900px; margin: 0 auto; background: #dc3545; background: rgba(220, 53, 69, 0.8); padding: 50px;} .listing-page{ padding: 5rem 0; } .listing-page h5.card-title{font-size: 15px; color: #b93a46; font-weight: 300; margin-bottom: 0.3rem; } .listing-page h3{font-size: 15px; font-weight: 300; margin-bottom: 0.3rem; } .listing-page .card-body p{ color: #000; font-weight: 300; font-size: 13px; line-height:15px; margin-bottom:7px; } .listing-page .card-body p strong{ font-weight: 400; } .card{ border: 0px; border-radius: 0px; } .card .card-img-top{ border: 0px; border-radius: 0px; } /* LOGIN bg */ .login-bg{ padding: 4rem 0; background: url(../images/login-bg.jpg) 0 0; width: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important;} .login-box{ width: 100%; max-width: 400px; margin: 0 auto; background: #dc3546; padding: 10px; } .login-box2{ width: 100%; min-height: 300px; background: #dc3546; padding: 15px; border: 1px solid #fff; padding:2rem 5rem;} .login-bg h2{ font-size: 32px; line-height: 42px; margin-bottom: 17px; color: #fff; text-align: center; } .login-bg .form-text { color: #ffe214; font-size: 12px; } .login-bg label { color: #fff; font-size: 18px; line-height: 22px; } .login-bg .form-group p{ font-size: 1.4rem; line-height: 2.1rem; } .login-bg .btn, .login-bg .btn:focus{ width: 100%; font-size: 18px; padding: 10px;} .login-bg .btn:hover{ background: #fff; color: #333; } .form-control-lg { height: 45px; padding: 0.5rem 1rem; font-size: 1rem; line-height: 1.5; border-radius: 0;} /* 24 july 2024 */ .listing-page-new{ padding: 2rem 0; } .listing-page-new .container{ max-width:900px; } .listing-page-new .container .post-card{ background:#cb6e78; padding:30px 20px; } .listing-page-new .container .post-card img.card-img-top{ border:5px solid #fedcdf; max-width:200px; } .listing-page-new .container .post-card .post-card-body{ padding:15px 0; } .listing-page-new .container .post-card .post-card-body h5{ color:#fff; font-size:17px; line-height: 24px; font-weight:400; } .listing-page-new .container .post-card .post-card-body ul{ list-style-type:none; padding-inline-start:0px; } .listing-page-new .container .post-card .post-card-body li{ color:#fff; font-size:16px; font-weight: 300; line-height:22px; margin-bottom:10px; } .listing-page-new .container .post-card .post-card-body2{ padding:15px 0; } .listing-page-new .container .post-card .post-card-body2 h2{ color:#fff; font-size:24px; line-height: 32px; font-weight:400; } .listing-page-new .container .post-card .post-card-body2 h2 span{ display: block; font-family: 'Montserrat', sans-serif; color:#fff; font-size:16px; font-weight: 300; line-height:22px; margin-bottom:5px; margin-top:5px; } .listing-page-new .container .post-card .post-card-body2 h5{ color:#fff; font-size:17px; line-height: 24px; font-weight:400; } .listing-page-new .container .post-card .post-card-body2 h6{ color:#fff; font-size:17px; line-height: 24px; font-weight:400; } .listing-page-new .container .post-card .post-card-body2 ul{ list-style-type:none; padding-inline-start:0px; } .listing-page-new .container .post-card .post-card-body2 li{ color:#fff; font-size:16px; font-weight: 300; line-height:22px; margin-bottom:5px; } .listing-page-new .container .post-card .post-card-body2 li strong{ font-weight:500 } .listing-page-new .container .post-card .post-card-body2 p{ color:#fff; font-size:16px; line-height: 22px; font-weight:300; } .listing-page-new .container .post-card .post-card-body2 p strong{ font-weight:400; } /**/ /* # Media Queries by Rajesh Kumar Kukreja : Cross Country Webservices ============================================================================================================== */ /* Desktop resolution : screen 01 */ @media only screen and (min-width: 2301px) and (max-width: 2900px) { .content { max-width: 800px; margin: 0 auto; } } /* Desktop resolution : screen 02 */ @media only screen and (min-width: 1901px) and (max-width: 2300px) { .content { max-width: 800px; margin: 0 auto; } } /* Desktop resolution : screen 03 */ @media only screen and (min-width: 1601px) and (max-width: 1900px) { .content { max-width: 800px; margin: 0 auto; } } /* Desktop resolution : screen 04 */ @media only screen and (min-width: 1301px) and (max-width: 1600px) { .container{ max-width:1240px; } } /* 15.6 Laptop resolution : screen 05 */ @media only screen and (min-width: 1201px) and (max-width: 1300px) { } /* Smaller than standard 960 (devices and browsers) : screen 06 */ @media only screen and (min-width: 1025px) and (max-width: 1200px) { .navbar-brand img{ max-width: 205px; } .navbar { padding: 0.5rem 1.5rem; /*background:rgba(0, 0, 0, 0.9); */} /*.navbar-nav{ margin-top: -25px; }*/ .navbar-light .navbar-nav .nav-link { color: #fff; text-transform: uppercase; padding-right: 0px; text-align: right; } .navbar-nav .dropdown-menu { position: static; right: 0; float: none; max-width: 300px;} .navbar-toggler { background: #d0212a;} .navbar-toggler-icon{ color: #fff; } } /* Smaller than standard 960 (devices and browsers) : screen 07 */ @media only screen and (min-width: 990px) and (max-width: 1024px) { body{ margin-top:50px; } .navbar-brand img{ max-width: 280px; } .navbar { padding: 0.5rem 2.5rem 0.5rem 0.5rem; /*background:rgba(0, 0, 0, 0.9);*/ } .navbar-nav{ margin-top: -5px; max-width: 120px;} .navbar-light .navbar-nav .nav-link { /*color: #fff;*/ text-transform: uppercase; padding-right: 0px; text-align: right; } .navbar-nav .dropdown-menu { position: static; right: 0; float: none; max-width: 300px;} .navbar-toggler { background: #d53e52;} .navbar-toggler-icon{ color: #fff; } .navbar-collapse{align-items: center;/* background: #000000a1;*/ background: #fff; padding: 15px; border-radius: 5px;} .nav-item .nav-link.btn.donate-btn { float: right; } .nav-item.border-left { border-left: 0px solid #dc3545!important; background: url(../images/login.png) 42px 7px no-repeat; padding-left: 18px; } /* Crousel 22 Aug 2022 */ .carousel .carousel-caption { bottom: 28%; padding: 35px; } .carousel .carousel-caption h5{ font-size: 42px; line-height: 52px; } .carousel .carousel-caption p{ font-size:16px; line-height: 24px; } /* about */ .about-foundation, .helping-hand { padding: 3rem 0rem; } .gallery-home, .events { padding: 3rem 0rem 6rem 0rem; } .about-foundation h2, .helping-hand h2, .how-we-work h2, .gallery-home h2{ font-size: 38px; line-height: 48px; } .about-foundation h2 span{ font-size: 14px; line-height: 28px; } .how-we-work .content{ padding: 15px; } .gallery-home { padding: 3rem 1rem; } .events .gallery-cell { width: 55%; } } /* Tablet Portrait size to standard 990 (devices and browsers) : screen 08 */ @media only screen and (min-width: 959px) and (max-width: 990px) { body{ margin-top:50px; } .navbar-brand img{ max-width: 280px; } .navbar { padding: 0.5rem 2.5rem 0.5rem 0.5rem; /*background:rgba(0, 0, 0, 0.9);*/ } .navbar-nav{ margin-top: -5px; max-width: 120px;} .navbar-light .navbar-nav .nav-link { /*color: #fff;*/ text-transform: uppercase; padding-right: 0px; text-align: right; } .navbar-nav .dropdown-menu { position: static; right: 0; float: none; max-width: 300px;} .navbar-toggler { background: #d53e52;} .navbar-toggler-icon{ color: #fff; } .navbar-collapse{align-items: center;/* background: #000000a1;*/ background: #fff; padding: 15px; border-radius: 5px;} .nav-item .nav-link.btn.donate-btn { float: right; } .nav-item.border-left { border-left: 0px solid #dc3545!important; background: url(../images/login.png) 42px 7px no-repeat; padding-left: 18px; } /* Crousel 22 Aug 2022 */ .carousel .carousel-caption { bottom: 7%; padding: 25px; } .carousel .carousel-caption h5{ font-size: 32px; line-height: 32px; } .carousel .carousel-caption p{ font-size:16px; line-height: 24px; } /* about */ .about-foundation, .helping-hand { padding: 3rem 0rem; } .gallery-home, .events { padding: 3rem 0rem 6rem 0rem; } .about-foundation h2, .helping-hand h2, .how-we-work h2, .gallery-home h2{ font-size: 38px; line-height: 48px; } .about-foundation h2 span{ font-size: 14px; line-height: 28px; } .how-we-work .content{ padding: 15px; } .gallery-home { padding: 3rem 1rem; } .events .gallery-cell { width: 55%; } } /* Tablet Portrait size to standard 960 (devices and browsers) : screen 09 */ @media only screen and (min-width: 768px) and (max-width: 959px) { body{ margin-top:50px; } .navbar-brand img{ max-width: 280px; } .navbar { padding: 0.5rem 2.5rem 0.5rem 0.5rem; /*background:rgba(0, 0, 0, 0.9);*/ } .navbar-nav{ margin-top: -5px; max-width: 120px;} .navbar-light .navbar-nav .nav-link { /*color: #fff;*/ text-transform: uppercase; padding-right: 0px; text-align: right; } .navbar-nav .dropdown-menu { position: static; right: 0; float: none; max-width: 300px;} .navbar-toggler { background: #d53e52;} .navbar-toggler-icon{ color: #fff; } .navbar-collapse{align-items: center;/* background: #000000a1;*/ background: #fff; padding: 15px; border-radius: 5px;} .nav-item .nav-link.btn.donate-btn { float: right; } .nav-item.border-left { border-left: 0px solid #dc3545!important; background: url(../images/login.png) 42px 7px no-repeat; padding-left: 18px; } /* Crousel 22 Aug 2022 */ .carousel .carousel-caption { bottom: 7%; padding: 25px; } .carousel .carousel-caption h5{ font-size: 32px; line-height: 32px; } .carousel .carousel-caption p{ font-size:16px; line-height: 24px; } /* about */ .about-foundation, .helping-hand { padding: 3rem 0rem; } .gallery-home, .events { padding: 3rem 0rem 6rem 0rem; } .about-foundation h2, .helping-hand h2, .how-we-work h2, .gallery-home h2{ font-size: 38px; line-height: 48px; } .about-foundation h2 span{ font-size: 14px; line-height: 28px; } .how-we-work .content{ padding: 15px; } .gallery-home { padding: 3rem 1rem; } .events .gallery-cell { width: 55%; } } /* All Mobile Sizes (devices and browser) : screen 10 */ @media only screen and (max-width: 800px) { } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) : screen 11 */ @media only screen and (min-width: 480px) and (max-width: 767px) { body{ margin-top:50px; } .navbar-brand img{ max-width: 260px; } .navbar { padding: 0.5rem 2.5rem 0.5rem 0.5rem; /*background:rgba(0, 0, 0, 0.9);*/ } .navbar-nav{ margin-top: -5px; max-width: 120px;} .navbar-light .navbar-nav .nav-link { /*color: #fff;*/ text-transform: uppercase; padding-right: 0px; text-align: right; } .navbar-nav .dropdown-menu { position: static; right: 0; float: none; max-width: 300px;} .navbar-toggler { background: #d53e52;} .navbar-toggler-icon{ color: #fff; } .navbar-collapse{align-items: center;/* background: #000000a1;*/ background: #fff; padding: 15px; border-radius: 5px;} .nav-item .nav-link.btn.donate-btn { float: right; } .nav-item.border-left { border-left: 0px solid #dc3545!important; background: url(../images/login.png) 42px 7px no-repeat; padding-left: 18px; } /* Crousel 22 Aug 2022 */ .carousel .carousel-caption { bottom: 7%; padding: 25px; } .carousel .carousel-caption h5{ font-size: 32px; line-height: 32px; } .carousel .carousel-caption p{ font-size:16px; line-height: 24px; } /* about */ .about-foundation, .helping-hand, .gallery-home, .events { padding: 3rem 0rem; } .about-foundation h2, .helping-hand h2, .how-we-work h2, .gallery-home h2{ font-size: 38px; line-height: 48px; } .about-foundation h2 span{ font-size: 14px; line-height: 28px; } .how-we-work .content{ padding: 15px; } .gallery-home { padding: 3rem 1rem; } .events .gallery-cell { width: 88%; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) : screen 12 */ @media only screen and (max-width: 479px) { body{ margin-top:50px; } .navbar-brand img{ max-width: 260px; } .navbar { padding: 0.5rem 1.5rem 0.5rem 0.5rem; /*background:rgba(0, 0, 0, 0.9);*/ } .navbar-nav{ margin-top: -5px; max-width: 120px;} .navbar-light .navbar-nav .nav-link { /*color: #fff;*/ text-transform: uppercase; padding-right: 0px; text-align: right; } .navbar-nav .dropdown-menu { position: static; right: 0; float: none; max-width: 300px;} .navbar-toggler { background: #d53e52;} .navbar-toggler-icon{ color: #fff; } .navbar-collapse{align-items: center;/* background: #000000a1;*/ background: #fff; padding: 15px; border-radius: 5px;} .nav-item .nav-link.btn.donate-btn { float: right; } .nav-item.border-left { border-left: 0px solid #dc3545!important; background: url(../images/login.png) 42px 7px no-repeat; padding-left: 18px; } /* Crousel 22 Aug 2022 */ .carousel .carousel-caption { bottom: 7%; padding: 25px; } .carousel .carousel-caption h5{ font-size: 32px; line-height: 32px; } .carousel .carousel-caption p{ font-size:16px; line-height: 24px; } /* about */ .about-foundation, .helping-hand, .gallery-home, .events { padding: 3rem 0rem; } .about-foundation h2, .helping-hand h2, .how-we-work h2, .gallery-home h2{ font-size: 38px; line-height: 48px; } .about-foundation h2 span{ font-size: 14px; line-height: 28px; } .how-we-work .content{ padding: 15px; } .gallery-home { padding: 3rem 1rem; } .events .gallery-cell { width: 88%; } /* */ .login-box{ width: 100%; max-width: 500px; margin: 0 auto; background: #dc3546; padding: 10px; } .login-box2{ width: 100%; min-height: 300px; background: #dc3546; padding: 15px; border: 1px solid #fff; padding:2rem 1rem;} } /* Small devices (mobile, 360px and down) : screen 13 */ @media only screen and (max-width: 360px) { } /* Small devices (mobile, 320px and down) : screen 14 */ @media only screen and (max-width: 320px) { }